決定版！イマドキの ESLint 設定！

2021 年度版は Zenn に書きましたのでご覧ください。

ESLint 設定を作成する技術

そろそろ書かねばな、と思っていたところに必要としてくださる方がいらっしゃることがわかったので書きました。

eslint, eslint-plugin-prettier, typescript-eslintの組み合わせは僕の中では完全に鉄板になったんだけど、「決定版！イマドキのESLint設定！」みたいなタイトルの煽り記事を書く元気はないんだよな……

— なかざん (@Nkzn) June 1, 2020

2020 年 6 月現在のまとめです。

TL;DR

先にベースの完成形となる設定ファイルをおいておきます。 JSON に比べ YAML のほうが記述量が少なく構造が把握しやすいので YAML で書いています。次の内容をプロジェクトのルートディレクトリーに .eslintrc.yml として保存してください。

---
env:
  es2020: true
  jest/globals: true
parser: '@typescript-eslint/parser'
parserOptions:
  project: ./tsconfig.json
plugins:
  - jest
  - '@typescript-eslint'
extends:
  - eslint:recommended
  - plugin:@typescript-eslint/eslint-recommended
  - plugin:@typescript-eslint/recommended
  - plugin:jest/recommended
  - prettier
  - prettier/@typescript-eslint

1. 昨今の開発は TypeScript 前提なので @typescript-eslint から提供されているパッケージを使おう
2. ESLint が提供する Stylistic Issues ルールは使わず、 Prettier に任せよう
3. オススメ設定を extends して設定にかける時間を最小限にしよう
4. これをベースに各フレームワークが推奨する設定を入れ込んでいこう
5. プロジェクトやメンバーにあわせてルールを微調整しよう

TypeScript 用設定

typescript-eslint を用いましょう。 Getting Started を読みながら手を動かせばベースとなる設定が完成します。次は TypeScript に対応した最低限の設定となります。

---
env:
  es2020: true
parser: '@typescript-eslint/parser'
parserOptions:
  project: ./tsconfig.json
plugins:
  - '@typescript-eslint'
extends:
  - eslint:recommended
  - plugin:@typescript-eslint/eslint-recommended
  - plugin:@typescript-eslint/recommended

tsconfig.json 内部の設定に制限はないようです。プロジェクトでお使いの設定ファイルへのパスを指定してください。

extends に各パッケージのオススメの設定を並べています。複数のオススメ設定に含まれているルールは下に書いたものの設定値で上書きされます。ここでは最初のベースとして eslint:recommended を用い、 typescript-eslint の推奨設定で上書いている形となります。

ターゲットとなるプラットフォームに応じて env に設定を追加してください。ブラウザーの場合は broser: true を、Node.js の場合は node: true を追加すると良いでしょう。その他は公式ドキュメントに記載があるものを適宜追加しましょう。

Prettier 用設定

eslint-config-prettier を使います。 Installation を読みながら設定していきましょう。

---
env:
  es2020: true
parser: '@typescript-eslint/parser'
parserOptions:
  project: ./tsconfig.json
plugins:
  - '@typescript-eslint'
extends:
  - eslint:recommended
  - plugin:@typescript-eslint/eslint-recommended
  - plugin:@typescript-eslint/recommended
  - prettier
  - prettier/@typescript-eslint

extends の最後に prettier と prettier/@typescript-eslint が増えています。

ここでのポイントはこれらを必ず extends の最後に書くことです。その他のオススメ設定により Prettier と競合するルールが有効化されていたとしても、これらの値を最後に書くことで最終的に Prettier の挙動と整合性をとってくれます。

Jest 用設定

eslint-plugin-jest を使います。 Installation と Usage を読みながら設定してください。

---
env:
  es2020: true
  jest/globals: true
parser: '@typescript-eslint/parser'
parserOptions:
  project: ./tsconfig.json
plugins:
  - jest
  - '@typescript-eslint'
extends:
  - eslint:recommended
  - plugin:@typescript-eslint/eslint-recommended
  - plugin:@typescript-eslint/recommended
  - plugin:jest/recommended
  - prettier
  - prettier/@typescript-eslint

env に jest/global: true が、 plugin に jest が追加されています。

extends にも plugin:jest/recommended が追加されています。 Prettier と整合性をとるために中ほどへの追加となっていることに注意してください。

各ライブラリー / フレームワーク用の設定を追加する

ベースの設定に対して、各ライブラリー / フレームワークの導入ドキュメントに書いてあるとおりに設定を追加、変更していけば問題ありません。

ただし、 React は parserOptions を変更する必要があるため、特記します。

React 用設定

---
env:
  es2020: true
  jest/globals: true
parser: '@typescript-eslint/parser'
parserOptions:
  project: ./tsconfig.json
  ecmaFeatures:
    jsx: true
plugins:
  - react
  - jest
  - '@typescript-eslint'
settings:
  react:
    version: detect
extends:
  - eslint:recommended
  - plugin:@typescript-eslint/eslint-recommended
  - plugin:@typescript-eslint/recommended
  - plugin:react/recommended
  - plugin:jest/recommended
  - prettier
  - prettier/@typescript-eslint

@typescript-eslint/parser は JSX を理解しますが、いままでの設定では有効化していませんでした。 parserOptions に追加した ecmaFeatures とその子 jsx が有効化のための設定にあたります。

その他は eslint-plugin-react を用いて設定をしていきましょう。 settings プロパティを追加して React のバージョンを指定しなければならない点は忘れがちなので気をつけましょう。

rules を使って自分好みに変更する

ここまででベースとなる設定ができあがっているため、あとはプロジェクトやメンバーにあわせた微調整です。とはいっても使用可能なルールが膨大なため、一覧をにらめっこしながら設定していくのは現実的ではありません。開発しながら微調整すれば良いでしょう。

基本的にオススメ設定は安全側に倒されているため、ルールの制約が強すぎると感じることがあるでしょう。そういった場合に該当のルールを off にしたりより細かい設定をするなど検討してみてください。

例えば関数の返り値の型は TypeScript の推論に任せる書き方とする、とプロジェクトで定めた場合、次のような警告は必要のないものでしょう。

  6:1   warning  Missing return type on function  @typescript-eslint/explicit-function-return-type

ルール名がわかるので、公式サイトのルール説明を参照しつつ、次のようなルールを追加していきましょう。

# 略
rules:
  '@typescript-eslint/explicit-function-return-type': off

まとめ

この記事で説明した設定をテンプレートとしてまとめています。

• https://github.com/januswel/node-template
  • React 用

こういったテンプレートを使ったり、設定ファイルの使いまわしをして効果的に時短しましょう。